<template>
    <div class="btns">
    <div class="top">
      <p>猜你喜欢</p>
    </div>
    <div class="center">
      <div>综合排序</div>
    <div @click="sheng(1)">距离最近</div>
    <div @click="sheng(2)">销量最高</div>
    <div>筛选</div>
    </div>
    <div class="bottom"  >
      <div v-for="(item,index) in list" v-bind:key="index">
        <img :src="item.picUrl" alt="">
        <h5>{{item.name}}</h5>
   
        <p>{{item.distance}}</p>
        <p>{{item.monthSalesTip}}</p>
      </div>
    </div>
    </div>
  </template>
  
  <script>
  import {dp_list} from '../utils/api.js'
  export default {
    name: 'btns',
    data(){
      return{
        btnsIndex:0,
        list:[ ]
      }
      },
      methods:{
        sheng(item){
          this.list.sort((p1,p2)=>{
            if(item==1){
              console.log(item);
              
              return p1.wmPoiScore - p2.wmPoiScore;
            }else{
              return p2.wmPoiScore - p1.wmPoiScore;
            }
          })
        }
      },
      mounted(){

dp_list({params:{}}).then((res)=>{
  console.log(res.data.list);
  this.list=res.data.list
  console.log(this.list);
  
})
},
    props: {
      msg: String
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>

.top{
margin: 10px 15px;
}
.center{
  display: flex;
  justify-content: space-around;
  font-size: 14px ;
  font-weight: bold;
  margin-bottom: 10px;
}

.bottom{
  height: 220px;
 overflow: auto;
}
.bottom div{
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-bottom: 10px;
  background: white;
}
.bottom h5{
  height: 50px;
  width: 100px;
  margin-right: 20px;
}
.bottom p{
  font-size: 14px;
}
.bottom img{
  width: 80px;
  height: 80px;
}
  </style>
  